<template>
  <div>
    <div class="logo-container">
      <span v-if="!isCollapse" style="font-size: 26px; color: #fff"
        >无人机管理平台</span
      >
    </div>
    <div class="menu-container">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="#20222A"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <template v-for="item in asideMenu">
            <template v-if="item.submenu">
              <el-submenu :index="item.path" :key="item.path">
                <!-- @click="clickMenu(item)" -->
                <!-- <i :class="'iconfont icon-' + item.icon"></i> -->
                <template slot="title">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="'#icon-' + item.icon"></use>
                  </svg>
                  <span slot="title">{{ item.label }}</span>
                </template>
                <template v-for="subItem in item.submenu">
                  <el-menu-item
                    :index="subItem.path"
                    :key="subItem.path"
                    class="subitem"
                  >
                    {{ subItem.label }}
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path" :key="item.path">
                <template>
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="'#icon-' + item.icon"></use>
                  </svg>
                  <span slot="title">{{ item.label }}</span>
                </template>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      asideMenu: [
        {
          path: "/index",
          name: "index",
          label: "首页",
          icon: "shouye",
        },
        {
          path: "/videoinfo",
          name: "videoinfo",
          label: "实时影像",
          icon: "shujutongji-",
        },
        {
          path: "/flyrecord",
          name: "flyrecord",
          label: "飞行记录",
          icon: "wentiguanli",
          submenu: [
            {
              path: "/flydata",
              name: "flydata",
              label: "历史飞行参数",
            },
            {
              path: "/flyvideo",
              name: "flyvideo",
              label: "历史飞行影像",
            },
          ],
        },
        {
          path: "/query",
          name: "query",
          label: "综合查询",
          icon: "zhishiku1",
          submenu: [
            {
              path: "/analysis",
              name: "analysis",
              label: "区域分析",
            },
            {
              path: "/detection",
              name: "detection",
              label: "目标检测",
            },
          ],
        },
        {
          path: "/register",
          name: "register",
          label: "无人机注册",
          icon: "shenqingtianbao",
        },
      ],
    };
  },
  computed: {
    ...mapState(["isCollapse"]),
  },
  methods: {
    handleOpen(index) {
      console.log(index);
    },
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.logo-container {
  width: 100%;
  height: 100px;
  line-height: 90px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  font-family: SimHei;
}
.el-menu ::v-deep.el-menu--inline {
  background-color: #4d4d4d !important;
}
::v-deep .el-submenu__title i {
  color: #fff;
}
.el-submenu ::v-deep .el-submenu__title {
  font-size: 18px;
  line-height: 50px;
  background-color: #8a8d8f !important;
}
::v-deep .el-menu-item {
  font-size: 18px;
  line-height: 50px;
  background-color: #8a8d8f !important;
}
::v-deep .el-menu-item:hover {
  background-color: #615c5c !important;
}
::v-deep .el-submenu__title:hover {
  background-color: #615c5c !important;
}
.subitem {
  margin-left: 20px;
}
.menu-container {
  margin-top: 8px;
}
.icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.25em;
  fill: currentColor;
  overflow: hidden;
  margin-right: 7px;
  font-size: 22px;
  margin-bottom: -2px;
}
img {
  vertical-align: middle;
}
</style>